<template>
  <view>
    <canvas
      class="canvas-img"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
      canvas-id="firstCanvas"
      id="firstCanvas"
      @longpress="canvasGet"
    ></canvas>
    <view class="img_box">
      <image
        class="img"
        :show-menu-by-longpress="true"
        v-if="canvasPath !== '' || flag"
        :src="canvasPath"
      ></image>
    </view>
  </view>
</template>
<script>
import { getImageInfo } from '@/utils/canvasFn.js'
export default {
  name: 'PosterCanvas',
  data() {
    return {
      flag: false,
      canvasPath: '',
      context: null,
      windowWidth: 0, //屏幕可用宽度
      windowHeight: 0, //屏幕可用高度
      canvasWidth: 300, //图片宽度
      canvasHeight: 520 //图片高度
      // canvasWidth: 0, //图片宽度
      // canvasHeight: 0, //图片高度
    }
  },
  props: {
    ifShow: {
      type: Boolean,
      default: false
    },
    myCanvasSize: {
      type: Array,
      default: () => {
        return [0.8, 16 / 9] //[0]为画布占屏幕宽度的比例，[1]为背景画布长宽比
      }
    },
    posInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  created() {
    // 获取设备信息
    const res = uni.getSystemInfoSync()
    this.windowHeight = res.windowHeight
    this.windowWidth = res.windowWidth
    // this.canvasWidth = this.windowWidth * this.myCanvasSize[0]
    // this.canvasHeight = this.canvasWidth * this.myCanvasSize[1]
  },
  methods: {
    async init() {
      uni.showLoading({
        title: '生成海报中...'
      })
      let { imageHead, imageBody, textHead, textRank, titleRank } = this.posInfo
      let canvasW = this.canvasWidth
      let canvasH = this.canvasHeight
      let ctx = uni.createCanvasContext('firstCanvas', this)
      // 背景
      ctx.drawImage(
        '../../static/ba.jpg',
        0,
        0,
        canvasW,
        canvasH
      )
      // 头像
      let ImageHead = await getImageInfo(imageHead)
      ctx.drawImage(
        ImageHead.path,
        canvasW * 0.5 - 25,
        canvasH * 0.08 + 10,
        50,
        50
      )
      // 二维码
      let ImageBody = await getImageInfo(imageBody)
      ctx.drawImage(ImageBody.path, canvasW * 0.5 - 59, 300, 118, 118)
      // 姓名
      // ctx.font = 'normal bold 18px Arial, sans-serif';
      ctx.font = 'normal bold 14px Microsoft JhengHei'
      ctx.textAlign = 'center'
      ctx.setFontSize(16)
      ctx.setTextBaseline('middle')
      ctx.setFillStyle('#222')
      ctx.fillText(
        textHead,
        canvasW / 2,
        canvasH * 0.08 + 75
      )
      // 姓名
      ctx.font = 'normal 400 18px Microsoft JhengHei'
      ctx.setFontSize(15)
      ctx.setTextBaseline('middle')
      ctx.setFillStyle('#e09555')
      ctx.fillText(
        textRank,
        canvasW / 2,
        canvasH * 0.08 + 100
      )
      // 姓名
      ctx.font = 'normal 400 18px Microsoft JhengHei'
      ctx.setFontSize(15)
      ctx.setTextBaseline('middle')
      ctx.setFillStyle('#222')
      ctx.fillText(
        titleRank,
        canvasW / 2,
        canvasH * 0.08 + 140
      )
      // 姓名
      ctx.font = 'normal 400 18px Microsoft JhengHei'
      ctx.setFontSize(15)
      ctx.setTextBaseline('middle')
      ctx.setFillStyle('#222')
      ctx.fillText('添加我的企业微信与我联系吧!', canvasW / 2, 205)
      ctx.draw()
      console.log('绘制完成')
      uni.hideLoading()
      this.canvasGet()
    },
    // 生成临时图片地址
    canvasGet() {
      // var that = this
      uni.canvasToTempFilePath(
        {
          canvasId: 'firstCanvas',
          success: res => {
            // 在H5平台下，tempFilePath 为 base64
            console.log('地址', res.tempFilePath)
            this.canvasPath = ''
            this.canvasPath = res.tempFilePath
            this.flag = true
          },
          fail: () => {
            console.log('下载失败')
          }
        },
        this
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.canvas-img {
  position: absolute;
  left: -800rpx;
}
.img_box {
  width: 300px;
  height: 520px;
  margin: 20rpx auto;
  z-index: 120;
}
.img_box .img {
  width: 100%;
  height: 100%;
}
</style>
